<template>
    <h5>父组件</h5>
    <div class="box">
        <!-- 引用子组件 -->
         <global-com></global-com>
        <global-com></global-com>
        <GlobalCom></GlobalCom>
        <!-- 引用局部组件 -->
         <local-com></local-com>
         <local-com></local-com>
    </div>
</template>

<script setup>
import LocalCom from './LocalCom.vue';
</script>

<style scoped>
.box{
    display: flex;
}
h5{
    background-color: turquoise;
    border: 5px dotted rgba(177, 21, 197, 0.541);
}
:deep(.title){
    border: 3px dotted rgba(177, 21, 197, 0.541);
}
</style>